import React from 'react'
import '../assets/styles'
// import * as monaco from 'monaco-editor';
import 'monaco-editor/esm/vs/basic-languages/javascript/javascript.contribution';
import MonacoEditor from 'react-monaco-editor';

import IndexService from "../service/IndexService";
import {connect} from 'react-redux';


class EditorContent extends React.Component {
    state = {};
    indexService = new IndexService();

    componentDidMount() {

    }

    onChangeHandle = (value, e) => {
        let tab = this.findActiveTab();
        tab.content = value;
        this.indexService.saveFileContent(tab)
    }
    findActiveTab = () => {
        let {openList} = this.props;
        for (let tab of openList) if (tab.isActive) return tab;
    }

    editorDidMountHandle(editor, monaco) {
        editor.focus();
    }

    renderEditorIns = (item) => {
        let div = null;
        switch (item.extName) {
            case ".js":
            case ".sql":
            case ".java":
            case ".cpp":
            case ".c":
            case ".txt":
                let options = {
                    selectOnLineNumbers: true,
                    renderSideBySide: false,
                    automaticLayout: true,
                    foldingStrategy: 'indentation', // 代码可分小段折叠
                    language: 'javascript',
                    value: '',
                    wordWrap: "on",   //自动换行，注意大小写
                    theme: 'vs-dark',
                    wordWrapColumn: 150,
                    wordWrapMinified: true,
                    wrappingIndent: "indent",
                    glyphMargin: false,
                    showFoldingControls:'always',
                    fontSize: '14px',//设置字体
                    lineNumbers: "on",//行号
                    mouseWheelZoom: true,
                    smoothScrolling: true,//平滑滚动
                }
                let option = Object.assign({}, options, {value: item.content});
                div = (<MonacoEditor
                    options={option}
                    language={'javascript'}
                    onChange={this.onChangeHandle}
                    editorDidMount={this.editorDidMountHandle}
                />);
                break;
            case ".png":
                div = (<img src={item.content} alt={item.name}/>);
                break;
            default :
                div = (<div>无法查看该内容</div>)
                break;
        }
        return div;
    }

    render() {
        const {openList} = this.props;
        return (
            <div className='code-editor-warp'>
                {openList.map((item, index) => {
                    return (
                        <div key={item._id} className={`code-editor-item ${item.isActive ? 'show' : ''}`}>
                            {this.renderEditorIns(item)}
                        </div>
                    )
                })}
            </div>
        );
    }
}

export default connect(state => ({...state}))(EditorContent);
